<template>
    <div class="box">
        <titleComponent title="综合看板"></titleComponent>
        <div class="list">
            <div class="list-item" v-for="item,i in list" :key="i">
                <div class="tag">产品要求</div>
                <div class="content">产品要求，新增产品的资费情况说明</div>
                <div class="time">2024-12-20 08:52</div>
            </div>
        </div>
    </div>
</template>
<script>
 import titleComponent from "./titleComponent";
 export default {
        name: "index",
        components: {
            titleComponent
        },
        data() {
            return {
                changeType: 1,
                changeType1: 1,
                list: [
                    {name: '产品要求'},
                    {name: '产品要求'},
                    {name: '产品要求'},
                    {name: '产品要求'},
                    {name: '产品要求'}
                ]
            }
        },
    }
</script>
<style scoped lang="less">
.box{
    position: relative;
}
.list{
    position: absolute;
    top: 40px;
    width: 100%;
}
.list-item{
    display: flex;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
    width: 100%;
    &:last-child{
        border-bottom: 0;
    }
}
.tag{
    color: #0b82fe;
    background: #e6f3fd;
    border:1px solid #0b82fe;
    border-radius: 4px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    width: 80px;
    margin: 8px 12px;
}
.time{
    position: absolute;
    right: 16px;
    color: #777;
}
</style>